<script src="/js/validateIsMain.js"></script>
<div id="subContainer">
    <header class="page-header no-margin">
        <div class="container-fluid">
            <h2 class="no-margin-bottom" style="margin-top: 0px; font-size: 20px;">容器</h2>
        </div>
    </header>

    <div class="breadcrumb-holder container-fluid">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.html">首页</a></li>
            <li class="breadcrumb-item"><a href="index.html">容器</a></li>
            <li class="breadcrumb-item active">新建</li>
        </ul>
    </div>

    <section class="tables">
        <div class="container-fluid">
            <div class="row">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h3 class="h4">创建项目容器</h3>
                    </div>
                    <div class="card-body">
                        <form class="form-horizontal" id="addForm">
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">选择镜像：<span class="text-red">*</span></label>
                                <div class="col-sm-10">
                                    <select name="image" class="form-control selectpicker" data-live-search="true"
                                            data-hide-disabled="true" v-model="containerInfo.image" required>
                                        <optgroup label="请选择镜像">
                                            <option value=""></option>
                                            <option v-for="item in images"
                                                    :value="item.RepoTags ? item.RepoTags[0] : ''">{{item.RepoTags ?
                                                item.RepoTags[0] : ""}}
                                            </option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">容器名称：<span class="text-red">*</span></label>
                                <div class="col-sm-10">
                                    <input name="name" type="text" class="form-control" required
                                           v-model="containerInfo.name">
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">端口映射：</label>
                                <div class="col-sm-10">
                                    <div v-for="(item, index) in containerInfo.ports" style="height: 40px">
                                        <div class="col-sm-4 no-padding">
                                            <label class="form-control-label">宿主机：</label>
                                            <input name="tPort" type="number" class="form-control"
                                                   style="display: inline-block; width: 65%;" v-model="item.portF">
                                        </div>
                                        <div class="col-sm-1 no-padding text-center"><span
                                                class="fa fa-long-arrow-right"></span></div>
                                        <div class="col-sm-4 no-padding">
                                            <label class="form-control-label">容器：</label>
                                            <input name="tPort" type="number" class="form-control" placeholder="请输入容器名称"
                                                   style="display: inline-block; width: 65%;" v-model="item.portT">
                                        </div>
                                        <div class="col-sm-3 no-padding text-center" style="font-size: 20px;">
                                            <span class="fa fa-minus-circle text-red" @click="reducePort(index)"></span>
                                            <span class="fa fa-plus-circle text-green" @click="addPort($event)"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">环境变量：</label>
                                <div class="col-sm-10">
                                    <div style="height: 40px" v-if="containerInfo.envs.length == 0">
                                        <div class="col-sm-9 no-padding"></div>
                                        <div class="col-sm-3 no-padding text-center" style="font-size: 20px;">
                                            <span class="fa fa-plus-circle text-green" @click="addEnv($event)"></span>
                                        </div>
                                    </div>
                                    <div v-for="(item, index) in containerInfo.envs" style="height: 40px"
                                         v-if="containerInfo.envs && containerInfo.envs.length > 0">
                                        <div class="col-sm-4 no-padding">
                                            <label class="form-control-label">KEY：</label>
                                            <input type="text" class="form-control"
                                                   style="display: inline-block; width: 65%;" v-model="item.key"></div>
                                        <div class="col-sm-1 no-padding text-center"><span
                                                class="fa fa-long-arrow-right"></span></div>
                                        <div class="col-sm-4 no-padding">
                                            <label class="form-control-label">VALUE：</label>
                                            <input type="text" class="form-control"
                                                   style="display: inline-block; width: 65%;" v-model="item.value">
                                        </div>
                                        <div class="col-sm-3 no-padding text-center" style="font-size: 20px;">
                                            <span class="fa fa-minus-circle text-red" @click="reduceEnv(index)"></span>
                                            <span class="fa fa-plus-circle text-green" @click="addEnv($event)"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">数据卷：</label>
                                <div class="col-sm-10">
                                    <div style="height: 40px" v-if="containerInfo.volumes.length == 0">
                                        <div class="col-sm-9 no-padding"></div>
                                        <div class="col-sm-3 no-padding text-center" style="font-size: 20px;">
                                            <span class="fa fa-plus-circle text-green"
                                                  @click="addVolume($event)"></span>
                                        </div>
                                    </div>
                                    <div v-for="(item, index) in containerInfo.volumes" style="height: 40px"
                                         v-if="containerInfo.volumes && containerInfo.volumes.length > 0">
                                        <div class="col-sm-4 no-padding">
                                            <label class="form-control-label">主机：</label>
                                            <input type="text" class="form-control"
                                                   style="display: inline-block; width: 65%;" v-model="item.routeF">
                                        </div>
                                        <div class="col-sm-1 no-padding text-center"><span
                                                class="fa fa-long-arrow-right"></span></div>
                                        <div class="col-sm-4 no-padding">
                                            <label class="form-control-label">容器：</label>
                                            <input type="text" class="form-control"
                                                   style="display: inline-block; width: 65%;" v-model="item.routeT">
                                        </div>
                                        <div class="col-sm-3 no-padding text-center" style="font-size: 20px;">
                                            <span class="fa fa-minus-circle text-red"
                                                  @click="reduceVolume(index)"></span>
                                            <span class="fa fa-plus-circle text-green"

                                                  @click="addVolume($event)"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">启动命令：</label>
                                <div class="col-sm-10">
                                    <input name="addr" type="text" class="form-control"
                                           placeholder="容器在启动时执行的指令，多条指令以逗号隔开"
                                           v-model="containerInfo.directive">
                                </div>
                            </div>

                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">工作目录：</label>
                                <div class="col-sm-10">
                                    <input name="workDir" type="text" class="form-control" placeholder="设置容器工作目录"
                                           v-model="containerInfo.workDir">
                                </div>
                            </div>
                        </form>
                        <div class="form-group row">
                            <div class="col-sm-4 offset-sm-3">
                                <button type="button" class="btn btn-secondary" @click="cancel()">取消</button>
                                <button type="button" class="btn btn-primary" @click="saveForm()">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="main-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <p>Copyright &copy; 2019.Company name All rights reserved.More Templates <a
                            href="http://www.jq22.com/" target="_blank" title="jq22">jq22</a></p>
                </div>
                <div class="col-sm-6 text-right">
                    <p></p>
                </div>
            </div>
        </div>
    </footer>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 70%; max-width: unset;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">日志</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div style="width: 100%; height: 700px; background-color: black; overflow-y: scroll; overflow-x: hidden;"
                         class="panel" id="logArea">
                        <div style="color: #9a9a9a;" v-for="item in logsArray"><span>{{item}}</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/survey/',
            pageInfo: {},
            images: [{}],
            containerInfo: {
                name: '',
                ports: [
                    {portF: 22, portT: 22}
                ],
                envs: [
                    {key: '', value: ''}
                ],
                image: "",
                volumes: [{routeF: '', routeT: ''}],
                startInfo: {
                    startType: 2,
                    addr: 'https://gitee.com/meedesidy/docker-monitor.git'
                },
                directive: 'nohup java -jar target/docker-0.0.1-SNAPSHOT.jar &',
                workDir: '',
                labels: ''
            },
            logsArray: [
                "日志开始..."
            ],
            params: null
        },
        created: function () {
            this.loadParams();
            this.loadContainerForm();
            this.initImagesSelector();
            $(".tagSelect").selectpicker();
            openSocket(this.socketCallback);
        },
        watch: {
            images: function () {
                this.$nextTick(function () {
                    $('.selectpicker').selectpicker('refresh');
                })
            },
            logsArray() {
                this.$nextTick(() => {
                    let h = $("#logArea")[0].scrollHeight;
                    $("#logArea").scrollTop(h);
                })
            }
        },
        methods: {
            loadContainerForm() {
                AJAX.GET("/project" + this.params.id, {}, function (resp) {
                    console.log(this.params);
                });
            },
            loadParams() {
                this.params = JSON.parse(sessionStorage.getItem('editParams'));
                this.containerInfo.startInfo = {
                    startType: 2,
                    addr: this.params.addr
                }
            },
            socketCallback(item) {
                this.logsArray.push(item)
            },
            validForm() {
                return $("#addForm").valid();
            },
            saveForm() {
                let that = this;
                if (!this.validForm()) {
                    return;
                }
                AJAX.POST_JSON("/project", {
                    "name": this.containerInfo.name,
                    "ports": this.containerInfo.ports,
                    "envs": this.containerInfo.envs,
                    "image": this.containerInfo.image,
                    "volumes": this.containerInfo.volumes,
                    "startInfo": this.containerInfo.startInfo,
                    "directive": this.containerInfo.directive,
                    "labels": this.containerInfo.labels,
                    "workDir": this.containerInfo.workDir
                }, function (resp) {
                    toastr.success(resp.msg, "成功");
                    toPage("/pages/project/index.html");
                });
            },
            cancel() {
                toPage("/pages/repository/index.html");
            },
            reduceVolume(index) {
                this.containerInfo.volumes.splice(index, 1);
            },
            addVolume(e) {
                let $inputs = $(e.target).parent().parent().find('input');
                for (let i = 0; i < $inputs.length; i++) {
                    if ($($inputs[i]).val() === null || $($inputs[i]).val() === '') {
                        return toastr.warning("还有未填写的变量", '警告');
                    }
                }
                this.containerInfo.volumes.push({fRoute: '', tRoute: ''})
            },
            reduceEnv(index) {
                this.containerInfo.envs.splice(index, 1);
            },
            addEnv(e) {
                let $inputs = $(e.target).parent().parent().find('input');
                for (let i = 0; i < $inputs.length; i++) {
                    if ($($inputs[i]).val() === null || $($inputs[i]).val() === '') {
                        return toastr.warning("还有未填写的变量", '警告');
                    }
                }
                this.containerInfo.envs.push({key: '', value: ''})
            },
            reducePort(index, item) {
                this.containerInfo.ports.splice(index, 1);
            },
            addPort(e) {
                let $inputs = $(e.target).parent().parent().find('input');
                for (let i = 0; i < $inputs.length; i++) {
                    if ($($inputs[i]).val() === null || $($inputs[i]).val() === '') {
                        return toastr.warning("还有未填写的端口", '警告');
                    }
                }
                this.containerInfo.ports.push({fPort: null, tPort: null})
            },
            initImagesSelector() {
                let that = this;
                AJAX.GET_SYNC("/images/all", {}, function (resp) {
                    that.images = resp.data;
                })
            }
        }
    });
</script>